<template>
    <div class="footer">
        <span class="todo-count">共0条未完成任务</span>
        <ul class="filters">
            <li>
                <a href="#" class="selected">所有</a>
            </li>
            <li>
                <a href="#">代办</a>
            </li>
            <li>
                <a href="#">完成</a>
            </li>
        </ul>
    </div>
</template>

<script setup>

</script>
<style scoped>
.footer {
    text-align: center;
    padding: 10px 20px;
    font-size: 15px;
}

.todo-count {
    float: left;
    position: relative;
    top: 10px;
    font-size: 20px;

}

.filters {
    list-style: none;
    float: right;
}

.filters li {
    display: inline;
}

.filters li a {
    margin-left: 20px;
    text-decoration: none;
    display: inline-block;
    border: 1px solid black;
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: black;
    font-weight: bold;
    margin-right: 20px;
}
.filters li a:hover{
    color: red;
}
</style>